<template>
  <div class="content-wrapper">
    <employeeDetail ref="employeeDetail" @refresh="getIntervieweeList(true)" :gobackText="'返回列表'"></employeeDetail>
    <div class="nav">
      <el-breadcrumb>
        <el-breadcrumb-item :to="{ path: '/administration-recruitList' }">HR招聘</el-breadcrumb-item>
        <el-breadcrumb-item>招聘列表</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="operation">
        <el-button type="text" @click="showAddOrEditDialog(false)" v-if="isAuth('recruitment:hrrecruitmentinterviewee:save')">录入</el-button>
        <el-button type="text" @click="clickFilter">筛选</el-button>
      </div>
    </div>
    <div class="search-bar" ref="searchBar" :style="{display: showSearchBar ? 'flex' : 'none'}">
      <el-form label-width="80px">
        <el-form-item label="时间区间">
          <el-date-picker type="date" placeholder="请选择起始日期" v-model="searchData.startTime" value-format="yyyy-MM-dd" style="width: 180px;"></el-date-picker>
          <span>-</span>
          <el-date-picker type="date" placeholder="请选择截止日期" v-model="searchData.endTime" value-format="yyyy-MM-dd" style="width: 180px;"></el-date-picker>
        </el-form-item>
        <el-form-item label="面试者">
          <el-input v-model="searchData.intervieweeName" style="width: 180px;"></el-input>
        </el-form-item>
        <el-form-item label="部门">
          <el-select v-model="searchData.intervieweeDeptId" placeholder="请选择部门" style="width: 180px;">
            <el-option label="全部" value=""></el-option>
            <el-option :label="dept.deptName" :value="dept.id" v-for="dept in departmentList" :key="dept.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="岗位">
          <el-select v-model="searchData.intervieweeJobId" placeholder="请选择岗位" style="width: 180px;">
            <el-option label="全部" value=""></el-option>
            <el-option :label="job.jobName" :value="job.id" v-for="job in jobList" :key="job.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="进度">
          <el-select v-model="searchData.intervieweeStatus" placeholder="请选择进度" style="width: 180px;">
            <el-option label="全部" value=""></el-option>
            <el-option :label="item.name" :value="item.index" v-for="item in intervieweeStatus" :key="item.index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="面试官">
          <el-input v-model="searchData.interviewerShowName" style="width: 180px;" disabled>
            <el-button slot="append" @click="selectDingUsers('interviewerId','interviewerShowName','interviewerIdArr', 'interviewerShowNameArr', 300)">选择</el-button>
          </el-input>
        </el-form-item>
        <el-form-item label="录入人">
          <el-input v-model="searchData.intervieweeCreatorName" style="width: 180px;" disabled>
            <el-button slot="append" @click="selectDingUsers('intervieweeCreatorId','intervieweeCreatorName','intervieweeCreatorIdArr', 'intervieweeCreatorNameArr', 300)">选择</el-button>
          </el-input>
        </el-form-item>
      </el-form>
      <div class="search-btn">
        <el-button @click="resetSearchData">重置</el-button>
        <el-button type="primary" @click="getIntervieweeList(true)">搜索</el-button>
      </div>
    </div>
    <div class="content" :style="{height: contentHeight+'px'}">
      <el-table :data="intervieweeList" stripe :height="tableHeight" style="width: 100%" border>
        <el-table-column sortable label="面试者" min-width="100" align="center">
          <template slot-scope="scope">
            <span @click.stop="showDetailDialog(scope.row)" style="cursor:pointer; text-decoration: underline;" v-if="isAuth('recruitment:hrrecruitmentinterviewee:list') && isAuth('recruitment:hrrecruitmentinterviewee:info')">{{scope.row.intervieweeName}}</span>
            <span v-if="!(isAuth('recruitment:hrrecruitmentinterviewee:list') && isAuth('recruitment:hrrecruitmentinterviewee:info'))">{{scope.row.intervieweeName}}</span>
          </template>
        </el-table-column>
        <el-table-column sortable prop="intervieweeSex" label="性别" min-width="80" align="center">
          <template slot-scope="scope">{{scope.row.intervieweeSex === 1 ? '男' : scope.row.intervieweeSex === 2 ? '女' : ''}}</template>
        </el-table-column>
        <el-table-column prop="intervieweeJobName" sortable label="应聘岗位" min-width="120" align="center"></el-table-column>
        <el-table-column sortable prop="intervieweeStatus" label="进度" min-width="100" align="center">
          <template slot-scope="scope">{{scope.row.intervieweeStatus === '-10' ? intervieweeStatus[10].name : intervieweeStatus[Number(scope.row.intervieweeStatus)-1].name}}</template>
        </el-table-column>
        <el-table-column label="执行人" min-width="100" align="center">
          <template slot-scope="scope">
            <span v-for="user in userList" :key="user.dingId">
              <span v-if="user.dingId === scope.row.candidatesId && scope.row.candidatesId !== ''">{{user.realName}}</span>
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="intervieweeDeptName" :filters="departmentList" label="部门" :filter-method="filterHandler" min-width="100" align="center"></el-table-column>
        <el-table-column prop="intervieweeInterviewTime" label="面试时间" min-width="180" align="center"></el-table-column>
        <el-table-column prop="intervieweeCreateTime" label="创建时间" min-width="100" align="center"></el-table-column>
        <el-table-column label="操作" min-width="240" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click.stop="showDetailDialog(scope.row)" style="padding: 0;" v-if="isAuth('recruitment:hrrecruitmentinterviewee:list') && isAuth('recruitment:hrrecruitmentinterviewee:info')">面试</el-button>
            <el-button type="text" @click.stop="showAddOrEditDialog(scope.row)" style="padding: 0;" v-if="isAuth('recruitment:hrrecruitmentinterviewee:update')">编辑</el-button>
            <el-button type="text" @click.stop="showHistoryDialog(scope.row, true)" style="padding: 0;" v-if="isAuth('recruitment:hrrecruitmentinterviewee:list') && isAuth('recruitment:hrrecruitmentinterviewee:info')">历史记录</el-button>
            <el-button type="text" @click.stop="showCancelDialog(scope.row)" style="padding: 0;" v-if="isAuth('recruitment:hrrecruitmentinterviewee:delete')">取消</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageConfig.pageIndex"
          :page-sizes="[10, 15, 20, 50]"
          :page-size="pageConfig.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageConfig.totalCount">
        </el-pagination>
      </div>
    </div>
    <addOrEditEmployee ref="addOrEditEmployee" @refresh="getIntervieweeList(true)"></addOrEditEmployee>
    <el-dialog
      title="取消面试"
      :visible.sync="cancelDialogVisible"
      :close-on-click-modal="false"
      :append-to-body="true"
      width="420px">
      <el-form label-width="80px">
        <el-form-item label="取消原因">
          <el-input v-model="cancelForm.remark" type="textarea" rows="5" placeholder="请输入取消原因"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer" style="display: flex; flex-direction: column-reverse;">
        <div>
          <el-button @click="cancelDialogVisible = false" size="mini">取消</el-button>
          <el-button type="primary" size="mini" @click="cancelInterviewee">确定</el-button>
        </div>
      </span>
    </el-dialog>
    <el-dialog
      class="dialog-style"
      title="历史面试记录"
      :visible.sync="historyDialogVisible"
      :close-on-click-modal="false"
      :append-to-body="true"
      width="520px">
      <el-table
        :data="historyList"
        @row-click="showDetailDialog"
        height="300px"
        border
        style="width: 100%">
        <el-table-column prop="intervieweeName" label="姓名" min-width="100" align="center"></el-table-column>
        <el-table-column prop="intervieweeModifyTime" label="录入时间" min-width="100" align="center"></el-table-column>
        <el-table-column prop="intervieweeJobName" label="应聘岗位" min-width="100" align="center"></el-table-column>
        <el-table-column label="面试结果" min-width="100" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.intervieweeResultStatus === '1' ? '录用' : scope.row.intervieweeResultStatus === '2' ? '备用' : scope.row.intervieweeResultStatus === '4' ? '拒绝' : ''}}</span>
          </template>
        </el-table-column>
        <el-table-column label="审核结果" min-width="100" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.intervieweeAuditStatus === '1' ? '录用' : scope.row.intervieweeAuditStatus === '2' ? '备用' : scope.row.intervieweeAuditStatus === '4' ? '拒绝' : ''}}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import dingMixin from  '@/mixins/ding'
import formUtil from '@/utils/formUtil'
import addOrEditEmployee from './add-or-edit-employee.vue'
import employeeDetail from './employee-detail.vue'
export default {
  data () {
    return {
      searchBarHeight: 0,
      contentHeight: 0,
      pageConfig: {
        pageIndex: 1,
        pageSize: 15,
        totalCount: 0,
      },
      showSearchBar: false,
      searchData: {
        intervieweeJobId: '',
        intervieweeDeptId: '',
        intervieweeResultStatus: '',  //面试结果状态
        intervieweeAuditStatus: '',   //面试审核结果状态
        intervieweeCreatorId: '',     //发起人id
        intervieweeCreatorName: '',
        intervieweeCreatorIdArr: [],
        intervieweeCreatorNameArr: [],
        intervieweeStatus: '',        //面试进度状态
        startTime: '',
        endTime: '',
        interviewerId: '',            //面试人id
        interviewerShowName: '',
        interviewerIdArr: [],
        interviewerShowNameArr: [],
        intervieweeName: '',
      },
      searchDataInit: {},
      departmentList: [],             //部门列表
      jobList: [],                    //岗位列表
      intervieweeStatus: [
        {index: 1, name: '待录入'},
        {index: 2, name: '待一面'},
        {index: 3, name: '待二面'},
        {index: 4, name: '待三面'},
        {index: 5, name: '待初审'},
        {index: 6, name: '待回访'},
        {index: 7, name: '待终审'},
        {index: 8, name: '待入职'},
        {index: 9, name: '待到岗'},
        {index: 10, name: '已入职'},
        {index: -10, name: '取消'}] ,
      intervieweeList: [],
      historyDialogVisible: false,
      historyList: [],
      cancelDialogVisible: false,
      cancelForm: {
        processId: '',
        remark: ''
      },
      userList: [],
    };
  },
  mixins: [dingMixin],
  components: {
    addOrEditEmployee, employeeDetail
  },
  computed: {
    tableHeight() {
      return this.contentHeight - 72
    }
  },
  async mounted () {
    this.contentHeight = document.documentElement['clientHeight'] - 70
    window.onresize = () => {
      this.changeContentHeight()
    }
    this.searchDataInit = JSON.parse(JSON.stringify(this.searchData))
    this.getIntervieweeList(true);
    this.getJobList()
    this.getUserList()
    if(this.$route.params.type === '2') await this.showDetailDialog(false, this.$route.params.id)
  },
  methods: {
    async getIntervieweeList(type) {
      if(type) this.pageConfig.pageIndex = 1
      let {list, totalCount} = await this.$httpN.postB('recruitment/hrrecruitmentinterviewee/list',{
        page: this.pageConfig.pageIndex,
        limit: this.pageConfig.pageSize,
        intervieweeJobId: this.searchData.intervieweeJobId,
        intervieweeDeptId: this.searchData.intervieweeDeptId,
        intervieweeResultStatus: this.searchData.intervieweeResultStatus,
        intervieweeAuditStatus: this.searchData.intervieweeAuditStatus,
        intervieweeCreatorId: this.searchData.intervieweeCreatorId,
        intervieweeStatus: this.searchData.intervieweeStatus,
        startTime: this.searchData.startTime,
        endTime: this.searchData.endTime,
        interviewerId: this.searchData.interviewerId,
        intervieweeName: this.searchData.intervieweeName,
      });
      this.intervieweeList = list
      if(type) this.pageConfig.totalCount = totalCount
    },
    async getUserList() {
      let {data} = await this.$http({
        url: this.$http.adornUrl('hr/user/list'),
        method: 'post',
        data: this.$http.adornData({
          page: 1,
          limit: 999,
          status: '1'
        })
      })
      if (data && data.code === 0) this.userList = data.page.list
    },
    resetSearchData() {
      this.searchData = JSON.parse(JSON.stringify(this.searchDataInit))
      this.getIntervieweeList(true);
    },
    //获得部门列表,岗位列表
    async getJobList() {
      let list = await this.$httpN.postB('recruitment/hrrecruitmentjob/list');
      //供table筛选
      list.forEach( item => {
        item.text = item.deptName;
        item.value = item.id
      })
      let ids = list.filter( item => { return item.deptPid === '' }).map( item => {return item.id} )
      this.departmentList = list.filter( item => { return ids.includes(item.deptPid) })
      let jobArr = [];
      this.departmentList.forEach( dept => {
        if(dept.jobVO && dept.jobVO.length > 0) jobArr.push(...dept.jobVO)
      })
      this.jobList = jobArr;
    },
    handleSizeChange(val) {
      this.pageConfig.pageSize = val;
      this.getIntervieweeList(true)
    },
    handleCurrentChange(val) {
      this.pageConfig.pageIndex = val;
      this.getIntervieweeList()
    },
    changeContentHeight() {
      this.searchBarHeight = this.showSearchBar ? this.$refs.searchBar.offsetHeight : 0
      this.contentHeight = document.documentElement['clientHeight'] - 70 - this.searchBarHeight
    },
    showAddOrEditDialog(data) {
      this.$nextTick(() => {
        this.$refs.addOrEditEmployee.init(data.id);
      })
    },
    showCancelDialog(row) {
      formUtil.resetData(this.cancelForm);
      this.cancelForm.processId = row.intervieweeProcessId;
      this.cancelDialogVisible = true;
    },
    async cancelInterviewee() {
      if( !await this.$httpN.postB('audit/process/cancel?processId='+this.cancelForm.processId+'&remark='+this.cancelForm.remark) ) return
      formUtil.submitSuccess('保存成功');
      this.cancelDialogVisible = false;
      this.getIntervieweeList();
    },
    //接口作废，不删面试者
    delInterviewee(data) {
      formUtil.submitConfirm('请问您是否确认删除该候选人', async ()=> {
        if(!await this.$httpN.postB('recruitment/hrrecruitmentinterviewee/delete', {processId: data.intervieweeProcessId})) return;
        formUtil.submitSuccess('删除成功');
        this.getIntervieweeList();
      })
    },
    clickFilter() {
      this.showSearchBar = !this.showSearchBar;
      this.$nextTick(() => {
        this.changeContentHeight();
      })
    },
    filterHandler(value, row, column) {
      return row.intervieweeDeptId === value;
    },
    showDetailDialog(row, id) {
      let interviewId = row ? row.id : id
      this.$nextTick(() => {
        this.$refs.employeeDetail.init(interviewId);
      })
    },
    async showHistoryDialog(row, show) {
      this.historyList = await this.$httpN.postB('recruitment/hrrecruitmentinterviewee/intervieweeList', {
        intervieweeName: row.intervieweeName,
        intervieweePhone: row.intervieweePhone
      })
      if(show) this.historyDialogVisible = true;
    },
    selectDingUsers(id, name, ids, names, num){
      this.complexPicker(num, [], this.searchData[ids]).then((data)=>{
        this.searchData[ids] = data.map(item => item.emplId);
        this.searchData[names] = data.map(item => item.name)
        this.searchData[name] = this.searchData[names].join(',');
        this.searchData[id] = this.searchData[ids].join(',')
      })
    },
  }
}
</script>

<style lang='scss' scoped>
.content-wrapper {
  min-width: 1000px;
  .nav {
    display: flex;
    height: 50px;
    line-height: 50px;
    padding: 0 20px;
    justify-content: space-between;
    border-bottom: 1px solid #DCDFE6;
    .el-breadcrumb {
      display: flex;
      align-items: center;
      .el-breadcrumb__item {
        float: none;
      }
    }
  }
  .search-bar {
    padding: 0 20px 20px;
    border-bottom: 1px solid #DCDFE6;
    display: flex;
    .el-form {
      flex: 1;
      display: flex;
      flex-wrap: wrap;
      .el-form-item {
        margin-bottom: 0;
        margin-top: 20px;
      }
    }
    .search-btn{
      width: 160px;
      display: flex;
      align-items: flex-end;
    }
  }
  .content {
    padding: 20px 20px 0;
    .page {
      height: 50px;
      display: flex;
      align-items: center;
      flex-direction: row-reverse;
    }
  }
}
.dialog-style /deep/ .el-dialog__body {
  padding: 0;
  .el-table td, .el-table th {
    padding: 6px 0;
  }
}
</style>